/**
 * Created by chocolate on 16/4/30.
 */
import React, {
    Component,
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableOpacity,
    TabBarIOS,
    Image,
    ListView,
    SegmentedControlIOS,
    ActivityIndicatorIOS,
} from 'react-native';

var Title = require('./Title');
var EventList= require('./EventList');
var Discover = require('./Discover');

var query = require('./Query').query;
var ChatList = require('./ChatList');
var DiEvents = require('./DiEvents');
var MySetting = require('./MySetting');
var SegmentedView =require('react-native-segmented-view');

import * as XG from 'react-native-tencent-xg';
import * as Remote from '../utility/remote';

//将来这个数据在componentDidMount的时候,从服务器里面获取
var EventListTest = [{time:"2016-05-10 13:30:00",type:1},
    {time:"2016-05-10 11:30:00",type:0},
    {time:"2016-05-10 08:30:00",type:1},
    {time:"2016-05-10 13:30:00",type:1},
    {time:"2016-05-10 11:30:00",type:0},
    {time:"2016-05-10 08:30:00",type:1},
]

global.g_avatar = null;

class ParentMain extends Component{
    constructor(props){
        super(props);
        this.state = {
            isLoaded:false,
            childList:[],
            selectedTab:'baobao',                           //TabBar的默认选项页
            parent:g_user,                         //当前家长对象(从login模块传递过来的)

            event: '',
            eventArgs: null,
            badgeNum: 0,
            localUserInfo: {id: 1},
            devToken: '',
        }
    }

     /**
     * 根据家长电话号码到服务器查找其关联的所有学生,
     * 用户名称(电话)是由login模块传递过来
     */
    componentDidMount(){

      XG.enableDebug(true);

      // Your accessId as number and your accessKey
      XG.setCredential(2200204681, 'I5W8P6IJ3S8T');
      XG.register(this.state.parent.phone, {alert: true, badge: true, sound: true});
      console.log('将账号'+this.state.parent.phone+'注册到信鸽服务器');
      XG.getApplicationIconBadgeNumber()
        .then(badgeNum => {
          this.setState({badgeNum});
        })
        .then(() => XG.checkPermissions())
        .then(data => console.log(data));

      query.getChildsQuery(this.state.parent.phone,this,function(owner,response){
                if(response.success === true){
                        owner.setState({childList:response.message});
                         owner.setState({isLoaded:true});
                        console.log("get childlist");
                    }})

      storage.load({
          key: 'avatar',
          id:this.props.user.phone,
          autoSync: true,
          syncInBackground: true
        }).then(ret => {
          global.g_avatar = ret.data;
        }).catch(err => {
          // console.warn(err);
      }) 

  }

  componentWillUnmount() {
  }


    _refreshChildList(){
        console.log("componentWillMount");
        query.getChildsQuery(this.state.parent.phone,this,function(owner,response){
                if(response.success === true){
                        owner.setState({childList:response.message});
                         owner.setState({isLoaded:true});
                        console.log("get childlist");
                    }})
    }

    render(){
        console.log("ParentMain render");

        if(this.state.isLoaded)
        {
            return(
                <TabBarIOS tintColor="#2981b1"
                    barTintColor="#FFF">
                    <TabBarIOS.Item title="抱抱"
                        selected={this.state.selectedTab === 'baobao'}
                        icon={require('../../icon/baobao.png')}
                        onPress={() =>{
                                this.setState({selectedTab: 'baobao',});
                        }}>
                        <View style={styles.container}>
                            <DiEvents navigator={this.props.navigator} parent={this.state.parent} childList={this.state.childList} onChildChange={this._refreshChildList.bind(this)}/>
                        </View>
                    </TabBarIOS.Item>

                    <TabBarIOS.Item
                        title="消息"
                        selected={this.state.selectedTab === 'message'}
                        icon={require('../../icon/chat.png')}
                        onPress={() =>{
                                this.setState({selectedTab: 'message',});
                        }}>
                        <View style={styles.container}>
                            <ChatList navigator={this.props.navigator}  parent={this.state.parent}/>
                        </View>
                    </TabBarIOS.Item>

                    <TabBarIOS.Item
                        title="发现"
                        selected={this.state.selectedTab === 'discover'}
                        icon={require('../../icon/discover.png')}
                        onPress={() =>{
                                this.setState({selectedTab: 'discover',});
                        }}>
                        <View style={styles.container}>
                            <Discover navigator={this.props.navigator} user={this.state.parent} childList={this.state.childList}/>
                        </View>
                    </TabBarIOS.Item>

                    <TabBarIOS.Item
                        title="我的"
                        selected={this.state.selectedTab === 'my'}
                        icon={require('../../icon/me.png')}
                        onPress={() =>{
                                this.setState({selectedTab: 'my',});
                        }}>
                        <View style={styles.container}>
                            <MySetting navigator={this.props.navigator} user={this.state.parent} childList={this.state.childList} forceLogin={this.props.forceLogin}/>
                        </View>
                    </TabBarIOS.Item>

                </TabBarIOS>

            );
        }
        else{
            return(
                    <View style={styles.container} />
                );
        }
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#eeeeee',
        flex: 1,
    },
    Title: {
        height: 40,
        marginTop: 20,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderColor: 'gray',
        borderTopWidth: 1,
        borderBottomWidth: 1,
    },
    ItemContainer:{
        flexDirection:'column',
        alignItems:'center',
        flex:1
    },
    
    Picture:{
        alignSelf:'center',

    },
    listView: {
        marginLeft:170,
        marginRight:170,
        paddingTop: 5,

    },
    row:{
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems:'center',

    },
    text:{
        textAlign:'center',
        fontSize:10,
        backgroundColor:'rgba(254,254,254,0)',
    },
    timeline:{
        width:1,
        alignSelf:'stretch',
        borderStyle:'solid',
        borderWidth:1,
        borderColor:'#d4d4d4',
        marginLeft:30,
    }, 
    bubble:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        paddingLeft:30,
        paddingRight:30,
        marginTop:25,
        marginLeft:5,
    },
    bubblestate:{
        marginLeft:-10,
        marginTop:20,
    },
    bubbleText:{
        color:'#a7a7a7',
        fontSize:20,
        backgroundColor:'#FFF'
    }

})

module.exports = ParentMain;